/*less避免编译*/
* {
  margin: 100px;
  padding: cacl(100+10px);
  width: 10+1px;
}
/*less继承*/
.father,
.son {
  position: relative;
  width: 100px;
  height: 100px;
}
.father:hover,
.son:hover {
  background-color: black;
}
.son:nth-child(1) {
  width: 50px;
  height: 50px;
}
/*arguments变量的作用*/
.abc {
  border: 1px solid black;
}
/*less下带参数的混合*/
#content {
  position: relative;
  width: 100px;
  height: 100px;
}
#content .item1 {
  /*提取item1,item2中共同的部分*/
  position: absolute;
  left: 0;
  top: 0;
  width: 33px;
  height: 27px;
  background-color: yellow;
}
#content item2 {
  /*提取item1,item2中共同的部分*/
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: blue;
  color: #fff;
}
/*less下的普通混合,普通混合会编译到css当中*/
/*不输出混合,需要加上()*/
#content {
  position: relative;
  width: 100px;
  height: 100px;
  /*基本的嵌套*/
}
#content .item1 {
  /*引入.commoncss样式*/
  /*提取item1,item2中共同的部分*/
  width: 33px;
  height: 27px;
  background-color: green;
  /*提取item1,item2中共同的部分*/
  position: absolute;
  left: 0;
  top: 0;
}
#content item2 {
  /*提取item1,item2中共同的部分*/
  width: 33px;
  height: 27px;
  background-color: green;
  /*提取item1,item2中共同的部分*/
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
}
/*less下的嵌套规则*/
#wrap {
  position: relative;
  width: 100px;
  height: 100px;
  /*基本的嵌套*/
}
#wrap .innerBox {
  position: absolute;
  left: 0;
  top: 0;
  /*&表示为同级,&:hover->innerBox:hover*/
}
#wrap .innerBox:hover {
  background-color: black;
}
/*less下的变量是块级作用域的*/
.class {
  one: 1;
}
.class .bclass {
  three: 3;
}
/*作为选择器和属性名：#@{selector的值}的形式*/
#header {
  background-color: yellow;
}
.header {
  color: pink;
}
/*作为普通属性值来使用直接`@pink`*/
.content {
  color: pink;
}
/*
    这个注释是可以被写入到css文件中的
*/
